<template>
	<view class="sigin">
		<view class="banner">
			<view class="banner-view">
				<view class="banner-font">
					<text>当前积分</text>
					{{sigin.integral}}
				</view>
				<image :src="Url+'add_images/singin-ri.png'" mode="widthFix"></image>
			</view>
		</view>
		<!-- <image :src="Url+'add_images/sigin-banner.png'" class="banner"></image> -->
		<view class="sigin-class">
			<view class="sigin-view sigin-view-top">
				<view class="sigin-view-flex">
					<view class="sigin-view-li" v-for="(item,index) in week" :key="index">
						<view class="sigin-view-no">
							<view class="sigin-view-a" v-if="index < 6 && item.state == 0">
								{{item.integral}}
							</view>
							<image v-if="item.state == 1" :src="Url+'add_images/singin-success.png'" class="sigin-view-img"></image>
							<image v-if="index == 6" :src="Url+'index/singin-li.png'" class="sigin-view-img"></image>
							<text class="sigin-view-sp" :class="item.state == 1 ? 'sigin-view-col' : ''" v-if="index < 6"></text>
						</view>
						<text class="sigin-view-ll">{{item.date}}</text>
					</view>
				</view>
				<button class="sigin-view-btn" v-if="sigin.state == 0" @tap="singinBtn" :loading="loading">签到</button>
				<button class="sigin-view-btn sigin-view-btnColor" v-else>已签到</button>
				<view class="sigin-view-p" v-if="sigin.num">已经连续签到<text>{{sigin.num}}</text>天</view>
			</view>
			<view class="sigin-view">
				<view class="sigin-view-title">活动规则</view>
				<view class="sigin-view-line" v-html="sigin.rule"></view>
			</view>
		</view>
		<!-- 签到弹框 -->
		<si-moke :show="siginIf" :detail="detail" @btn="btn"></si-moke>
		<shop-loading v-if="shopLoad"></shop-loading>
	</view>
</template>

<script>
	import siMoke from '../components/sigin-moke.vue';
	import {signIn,signInDo} from '@/common/index.js';
	export default {
		components:{
			siMoke
		},
		data(){
			return{
				Url:this.Imgurl,
				siginIf:false,
				sigin:{},
				week:[],
				detail:0,
				loading:false,
				shopLoad:true
			}
		},
		created() {
			this.getData()
		},
		methods:{
			btn(){
				this.siginIf = false;
			},
			getData(){
				this.shopLoad = true;
				signIn().then(res=>{
					if(res.code == 1){
						// console.log(res)
						this.sigin = res.msg;
						this.week = res.msg.list;
						this.shopLoad = false;
					}else{
						this.toast(res.msg);
						this.shopLoad = false;
					}
				}).catch()
			},
			singinBtn(){
				this.loading = true;
				signInDo().then(res=>{
					if(res.code == 1){
						this.detail = res.msg;
						this.siginIf = true;
						this.loading = false;
						this.getData()
					}else{
						this.toast(res.msg)
						this.loading = false;
					}
				}).catch()
			}
		}
	}
</script>

<style lang="less" scoped>
	.sigin{
		width: 100%;
		.banner{
			height: 350upx;
			width: 100%;
			display: block;
			background-image: url(https://jy-shops.oss-cn-beijing.aliyuncs.com/client/image/add_images/sigin-banner.png);
			background-repeat: no-repeat;
			background-size: cover;
			position: relative;
			.banner-view{
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				width: 100%;
				top: 20%;
				image{
					width:260upx;
					height: 120upx;
					margin-left: 124upx;
				}
				.banner-font{
					font-size: 66upx;
					color: #FFFFFF;
					text-align: center;
					text{
						font-size: 28upx;
						display: block;
						text-align: center;
					}
				}
			}
		}
		&-view-line{
			font-size: 24upx;
			color: #666666;
			margin-top: 45upx;
			p{
				line-height: 50upx;
			}
		}
		&-view-btnColor{
			background-color: #CCCCCC !important;
		}
		&-view-img{
			width: 60upx;
			height: 60upx;
		}
		&-view-a{
			width: 60upx;
			height: 60upx;
			border-radius: 30upx;
			background-color: #F9F9F9;
			color: #999999;
			font-size: 26upx;
			line-height: 60upx;
			text-align: center;
		}
		&-view-no{
			display: flex;
			align-items: center;
		}
		&-view-li{
			
		}
		&-view-title{
			text-align: center;
			display: flex;
			align-items: center;
			font-size: 28upx;
			color: #666666;
			font-weight:500;
			justify-content: center;
			&::after,&::before{
				content: "";
				display: block;
				width: 25%;
				height: 4upx;
				background-color: #F9F9F9;
				margin: 0 20upx;
			}
		}
		&-view-btn{
			width: 100%;
			height: 80upx;
			color: #FFFFFF;
			background-color: #FFCE0C;
			font-size: 32upx;
			margin-top: 62upx;
			&::after{
				border: none;
			}
		}
		&-view-ll{
			width: 60upx;
			color: #999999;
			font-size: 22upx;
			display: block;
			text-align: center;
			margin-top: 15upx;
		}
		&-view-sp{
			height: 10upx;
			width:30upx;
			background-color: #F9F9F9;
			display: block;
		}
		&-view-col{
			background-color: #FFE306;
		}
		// height: 350upx;
		// background-image: url('https://jy-shops.oss-cn-beijing.aliyuncs.com/client/image/index/sigin-banner.png');
		// background-repeat: no-repeat;
		// background-size: 100% 100%;
		// padding:0 30upx;
		// box-sizing: border-box;
		&-view-flex{
			display: flex;
			align-items: center;
		}
		&-view-p{
			margin-top: 50upx;
			font-size: 24upx;
			color: #999999;
			text{
				font-size: 30upx;
				color: #666666;
				padding:0 10upx;
			}
		}
	}
	.sigin-class{
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.sigin-view-top{
		margin-top: -75upx;
		z-index: 100;
		position: relative;
	}
	.sigin-view{
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 10upx;
		padding: 50upx 40upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
	}
</style>
